<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<header th:replace="admin/fragments/header::headerFragment"></header>

<head>
    <link href="/static/css/md/jquery.tagsinput.css" rel="stylesheet" />
    <link href="/static/css/md/select2-bootstrap.css" rel="stylesheet" />
    <link href="/static/css/md/toggles.css" rel="stylesheet" />
    <link href="/static/css/md/style.css" rel="stylesheet" />
    <link href="//cdn.bootcss.com/multi-select/0.9.12/css/multi-select.css" rel="stylesheet" />
    <link href="//cdn.bootcss.com/select2/3.4.8/select2.min.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="/static/css/publish.css">
    <link type="text/css" rel="stylesheet" href="/static/css/editormd.css">
</head>
<style>
    .contents {
        width: 100%;
        padding: 70px 0 0 200px;
        background: #f5f5f5;
    }
    
    .footer {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .footer p {
        height: 50px;
        background: #f9f9f9;
        line-height: 50px;
        text-align: left;
        padding-left: 50px;
    }
</style>

<body>
    <div th:replace="admin/fragments/header::header-body"></div>
    <div class="contents">
        <div class="contentwapper">
            <h5 th:text="${blog!=null }?'编辑文章': '发布文章'">发布文章</h5>
            <form id="myform">
                <div class="inputwapper">
                    <div class="input_left">
                        <div class="input-group">
                            <input th:value="${blog!=null and blog.title!=null }?${blog.title}: ''" id="title" name="title" placeholder="请输入文章标题" type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                            <span style="display: none;color: red;position: relative;top: 7px;left: 5px;" class="err err-top40" id="title_text">用户名错误</span>
                        </div>
                    </div>
                    <div class="input_right">
                        <div class="input-group">
                            <select id="type" name="type" class="custom-select">
                                <option selected value="生活">生活</option>
                                <option value="随笔">随笔</option>
                                <option value="学习">学习</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="edit">
                    <div id="my-editormd">
                        <textarea th:value="${blog!=null and blog.content!=null }?${blog.content}: ''" id="my-text" name="my-text" style="display:none;" class="markdown-textarea" th:utext="${contents!=null and contents.content !=null}?${contents.content}: ''"></textarea>
                        <!-- 注意：name属性的值-->
                        <textarea th:value="${blog!=null and blog.content!=null }?${blog.content}: ''" id="content" name="content" style="display:none;"></textarea>
                        <span style="display: none;color: red" class="err err-top40" id="content_text">用户名错误</span>
                    </div>
                </div>
            </form>
            <div class="btnwapper">
                <button type="button" id="btn-secondary" class="btn btn-secondary">存为草稿</button>
                <button type="button" id="btn-primary" class="btn btn-primary">发布文章</button>
            </div>
        </div>
        <div th:replace="admin/fragments/footer::footer"></div>
    </div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="/static/js/md/jquery.tagsinput.min.js"></script>
<script src="/static/js/md/jquery.quicksearch.js"></script>
<script src="/static/js/editormd.js"></script>
<!--<script th:src="@{/admin/plugins/md/js/jquery.scrollto.js}"></script>-->
<!--<script th:src="@{/admin/plugins/md/js/pagedown.js}"></script>-->
<!--<script th:src="@{/admin/plugins/md/js/pagedown-extra.js}"></script>-->
<!--<script th:src="@{/admin/plugins/md/js/diff.js}"></script>-->
<!--<script th:src="@{/admin/plugins/md/js/md.js}"></script>-->
<script th:src="@{//cdn.bootcss.com/multi-select/0.9.12/js/jquery.multi-select.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/select2/3.4.8/select2.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/jquery-toggles/2.0.4/toggles.min.js}"></script>
<!--校验-->
<script src="/static/js/tbdValidate.js"></script>
<script type="text/javascript">
    // 判断类型的提交
    function forAjax(state) {
        $.ajax({
            url: "/article/publish",
            data: {
                "title": $("#title").val(),
                "type": $("#type").val(),
                "content": $("#content").val(),
                "state": state
            },
            success: function(result) {
                if ("success" === result.state) {
                    console.log("文章发表成功")
                    setTimeout(function() {
                        self.location.href = "/articleManage/index";
                    }, 1000)
                }
            }
        });
    }

    $(function() {
        editormd("my-editormd", { //注意1：这里的就是上面的DIV的id属性值
            width: "90%",
            height: 400,
            syncScrolling: "single",
            path: "/static/lib/", //注意2：你的路径
            saveHTMLToTextarea: true, //注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], //图片上传格式
            imageUploadURL: "/admin/attach/uploadfile",
            onload: function(obj) { //上传成功之后的回调
            }
        });

        //校验
        var regconfig=[
            {eleinput:"title",eletext:"title_text",rule:[{reg:/^.+$/,text:"标题不能为空"},{reg:/^.{0,20}$/,text:"不能超过20个字"}]}
        ];

        tbdValidate(
            regconfig,
            {
                elesubmit:"btn-secondary",//提交按钮
                funsubmit:function(){//验证通过可提交回调
                    forAjax("0")
                },
                funerr:function(){//不可提交回调

                },
                funerrlist:function(errlist){
                    $('#'+ errlist[0]).focus();
                }
            }
        );
        tbdValidate1(
            regconfig,
            {
                elesubmit:"btn-primary",//提交按钮
                funsubmit:function(){//验证通过可提交回调
                    forAjax("1")
                },
                funerr:function(){//不可提交回调

                },
                funerrlist:function(errlist){
                    $('#'+ errlist[0]).focus();
                }
            }
        );
    });
</script>

</html>